<template>
  <div class="box">
    <button @click="isShowDialog">下一步</button>
    <van-dialog
      v-model="dialog"
      show-cancel-button
      :before-close="beforeClose"
    >
      <van-field
        v-model="username"
        label="用户名"
        placeholder="请输入用户名"
      />
      <van-field
        v-model="password"
        type="password"
        label="密码"
        placeholder="请输入密码"
      />
    </van-dialog>
  </div>
</template>

<script>
import showDialog from './dialog'
export default {
  name: 'index',
  data () {
    return {
      dialog: false,
      username: '',
      password: '',
      BANKS: {
        bank_code: 'icbc',
        provider_data: [{
          provider_partner_id: 2000402,
          provider_partner_name: '快钱协议支付',
          channel_priority: 1,
          BANK_CODE: 'icbc',
          BANK_NAME: '中国工商银行'
        }, {
          provider_partner_id: 1601,
          provider_partner_name: '宝付协议支付',
          channel_priority: 2,
          BANK_CODE: 'icbc',
          BANK_NAME: '中国工商银行'
        }]
      }
    }
  },
  components: {
    showDialog
  },
  methods: {
    isShowDialog () {
      this.dialog = true
    },
    beforeClose (action, done) {
      if (action === 'confirm') {
        setTimeout(done, 1000)
      } else {
        done()
      }
    }
  }
}
</script>

<style scoped>
  .box {
    text-align: center;
    margin-top: 20%;
  }
  .box button{
    background: #FF8F00;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
  }
</style>
